<template>
  <page-layout>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="商机名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input style="width:100%;" placeholder="请输入商机名称" v-model="queryParam.businessName"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <vxe-grid
        id="CrmBusinessList"
        keep-source
        ref="vxeTable"
        :height="null"
        v-bind="options"
        @checkbox-change="onSelectChange"
        @checkbox-all="onSelectChange"
        @page-change="handlePageChange"
      >
      <!-- 商机名称 -->
      <template #businessName="{ row }">
        <a @click="handleDetail(row)">{{ row.businessName }}</a>
      </template>
      <!-- 客户名称 -->
      <template #customer="{ row }">
        <a @click="showDetail(row)">{{ row.textMap.customerId$DICT_TEXT_ }}</a>
      </template>
	  <!-- 项目名称 -->
	  <template #product="{ row }">
	    <a @click="showProductDetail(row)">{{ row.textMap.productId$DICT_TEXT_ }}</a>
	  </template>
      <template #action="{ row }">
        <template>
          <a @click="showFollowup(row)">活动记录</a>
        </template>
      </template>
    </vxe-grid>
    </div>
    <!-- table区域-end -->
    <CrmBusinessModal ref="modalForm" @ok="modalFormOk"></CrmBusinessModal>
	<CrmCustomerModal ref="modalFormCustomer" @ok="modalFormOk"></CrmCustomerModal>
	<CrmProductModal ref="modalFormProduct" @ok="modalFormOk"></CrmProductModal>
	
	<!-- 跟进记录功能 -->
	<crm-followup ref="followupForm" @close="modalFormOk"></crm-followup>
  </a-card>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { deleteAction,getAction } from '@/services/manage'
import CrmBusinessModal from '../business/modules/CrmBusinessModal.vue'
import CrmCustomerModal from '../customer/modules/CrmCustomerModal.vue'
import CrmProductModal from '../product/modules/CrmProductModal.vue'
import CrmFollowup from "../followup/CrmFollowup";

export default {
  name: 'CrmBusinessList',
  components: {
    PageLayout,
    CrmBusinessModal,
	CrmCustomerModal,
	CrmProductModal,
	CrmFollowup
  },
  mixins: [VxeTableMixin],
  data() {
    return {
      columns: [
		  {
		    title:'商机名称',
		    align:"center",
		    width: 150,
		    field: 'businessName',
			slots: { default: 'businessName' }
		  },
		  {
		    title:'项目名称',
		    align:"center",
		    field: 'productId',
		    width: 200,
		    formatter: 'dictText',
			slots: { default: 'product' }
		  },
		  {
		    title:'客户名称',
		    align:"center",
		    field: 'customerId',
		    width: 200,
		    formatter: 'dictText',
			slots: { default: 'customer' }
		  },
		  {
		    title:'消息来源',
		    align:"center",
		    field: 'source',
		    width: 100,
		    formatter: 'dictText'
		  },
		  {
		    title:'客户类型',
		    align:"center",
		    width: 100,
		    field: 'crmCustomer.textMap.customerType$DICT_TEXT_'
		  },
		  {
		    title:'跟进公司',
		    align:"center",
		    width: 150,
		    field: 'companyName'
		  },
		  {
		    title:'跟进部门',
		    align:"center",
		    field: 'deptId',
		    width: 150,
		    formatter: 'dictText'
		  },
		  {
		    title:'商机归属人',
		    align:"center",
		    field: 'ownerUserId',
		    width: 150,
		    formatter: 'dictText'
		  },
		  {
		    title:'预估合同总额',
		    align:"center",
		    width: 150,
		    field: 'money'
		  },
		  {
		    title:'销售阶段',
		    align:"center",
		    field: 'statusId',
		    width: 100,
		    formatter: 'dictText'
		  },
		  {
		    title:'下次联系时间',
		    align:"center",
		    width: 150,
		    field: 'nextTime'
		  },
		  {
		    title:'上次联系内容',
		    align:"center",
		    width: 150,
		    field: 'lastContent'
		  },
		  {
		    title:'创建时间',
		    align:"center",
		    width: 150,
		    field: 'createTime'
		  },
		  {
		    title:'有无合同',
		    align:"center",
		    field: 'isContract',
		    width: 100,
		    formatter: 'dictText'
		  },
        {
          title: '操作',
		  align:"center",
		  fixed:"right",
          slots: { default: 'action' },
          width: 170
        }
      ],
      url: {
        list: '/business/listToday',
        delete: '/business/delete/',
        deleteBatch: '/business/deleteBatch',
        exportXlsUrl: '/business/exportXls',
        importExcelUrl: '/business/importExcel',
		customerInfo:'/customer/crmCustomer/queryById',
		productInfo:'/product/queryById'
      },
      // 查询参数
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      toggleSearchStatus: false,
      customTableToolbar: {
        buttons: [],
      },
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    showFollowup(record){
      let category = 'crm_business';
      this.$refs.followupForm.open(record,category);
    },
    showDetail(record){
	  var that = this
	  getAction(that.url.customerInfo, { "id": record.customerId }).then((res) => {
		that.$refs.modalFormCustomer.disableSubmit = true
		that.$refs.modalFormCustomer.edit(res.result)
		that.$refs.modalFormCustomer.title = '详情'
	  })
    },
    showProductDetail(record){
	  var that = this
	  getAction(that.url.productInfo, { "id": record.productId }).then((res) => {
		that.$refs.modalFormProduct.disableSubmit = true
		that.$refs.modalFormProduct.edit(res.result)
		that.$refs.modalFormProduct.title = '详情'
	  })
    }
  }
}
</script>

